<template>
	<view class="content">
		<image class="title" src="../../static/total_img_banner@2x.png" mode="widthFix"></image>
		<view class="login">
			<view class="line">
				<view class="key">用户名</view>
				<input class="value" v-model="username" placeholder="请输入用户名" placeholder-class="placeholder" />
			</view>
			<view class="line">
				<view class="key">密码</view>
				<input class="value" v-model="pwd" password="true" placeholder="请输入密码"
					placeholder-class="placeholder" />
			</view>
			<view class="line">
				<view class="key">确认密码</view>
				<input class="value" v-model="pwd2" password="true" placeholder="请再次输入密码"
					placeholder-class="placeholder" />
			</view>
			<button style="margin-top: 80rpx;" @click="register">注册</button>
		</view>
	</view>
</template>

<script>
	import {
		doPostForm
	} from '../../js_sdk/request-helper.js'
	export default {
		data() {
			return {
				username: '',
				pwd: '',
				pwd2: ''
			}
		},
		methods: {
			register() {
				if (!this.username) {
					uni.showToast({
						title: '请输入用户名'
					})
					return
				}
				if (!this.pwd) {
					uni.showToast({
						title: '请输入密码'
					})
					return
				}
				if (!this.pwd) {
					uni.showToast({
						title: '请再次输入密码'
					})
					return
				}
				if (this.pwd != this.pwd2) {
					uni.showToast({
						title: '两次次输入密码不一致'
					})
					return
				}
				// uni.navigateBack()
				let params = {
					museumId: uni.getStorageSync('museumId'),
					username: this.username,
					pwd: this.pwd
				}
				doPostForm('/blade-museum/user/register',
					params,
					(res) => {
						uni.setStorageSync('username', this.username)
						uni.setStorageSync('pwd', this.pwd)
						uni.setStorageSync('userInfo', res)
						uni.navigateBack()
					}, (err) => {
						uni.showToast({
							title: err,
							icon: 'error'
						})
					})
			}
		}
	}
</script>

<style>
	.content {
		position: fixed;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-image: linear-gradient(#B9AC90, #8b662f);
	}

	.title {
		width: 100%;
		height: auto;
	}

	.login {
		width: calc(100% - 120rpx);
		margin: 60rpx;
	}

	.line {
		margin-top: 30rpx;
		width: calc(100% - 40rpx);
		padding: 0 20rpx;
		height: 80rpx;
		background: #B9AC90;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.key {
		font-size: 30rpx;
		color: #fff;
	}

	.value {
		width: 440rpx;
		font-size: 28rpx;
		color: #fff;
	}

	.placeholder {
		color: #ddd;
	}

	button {
		margin-top: 30rpx;
		background: #AE6059;
		color: #fff;
		height: 80rpx;
		align-items: center;
		font-size: 30rpx;
	}
</style>
